<template>
	<div class="masscalculation">
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		
		<div v-if="percent == 0?false:true" style="width: 100%;height: 100%;background-color: rgba(255,255,255,0.8);z-index:999;position: absolute;left: 0%;top: 20px;">
			<i-circle :percent="percent" :stroke-color="color" style="position: absolute;top: 50%;margin-left: -60px;margin-top: -60px;">
		        <Icon v-if="percent == 100" type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
		        <span v-else style="font-size:24px">{{ percent }}%</span>
		   </i-circle>
		</div>
		
		
		<Spin size="large" fix v-if="loadingShow"></Spin>
		<Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 14px;font-weight: 800;margin-left: 10px;">step1:选择计算的年级与班级</span>
		</Row >
		<!--<Row style="padding:35px 40px 0px 45px;">
	        <Col span="12" style="text-align: left;">
	        	<span>入学年份：</span>
				<Select v-model="startYearSelect" style="width:150px;text-align: center;">
			        <Option v-for="item in startYearList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			    </Select>
	        </Col>
	    </Row>-->
		<Row style="padding:35px 40px 0px 45px;">
	        <Col span="24" style="text-align: left;">
	        	<span style="font-size: 14px;">年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
	            <RadioGroup v-model="gradeSelect" type="button" @on-change="gradeChangeSelect">
	        		<Radio v-for="item in gradeList" :key="item.value" :label="item.value">{{item.label}}</Radio>
			    </RadioGroup>
	        </Col>
	    </Row>
	    <!--<Row style="padding:35px 40px 0px 45px;">
	        <Col span="24" style="text-align: left;">
	        	<span style="font-size: 14px;">班&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
	        	<span style="padding-bottom:6px;margin-bottom:6px;">
			        <Checkbox
			            :value="checkAll"
			            @click.prevent.native="handleCheckAll"><span style="font-size: 14px;">全选</span></Checkbox>
			    </span>
	        	<CheckboxGroup  v-model="classselect"   @on-change="classchange">
	        		<Checkbox  v-for="item in classlist" :key="item.value" :label="item.value">{{item.label}}班</Checkbox>
			    </CheckboxGroup>
	        </Col>
	    </Row>-->
	    
	    <Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 14px;font-weight: 800;margin-left: 10px;">step2:导入成绩</span>
			<span @click="getdownload" style="font-size: 12px;color:#517edb;margin-left: 10px;cursor:pointer;"><i style="font-size: 15px;" class="iconfont alicon-down_light"></i>基数模板下载</span>
		</Row >
	    <Row style="padding:30px 0px 0px 45px">
	       <div  style="float: left;text-align: right;margin-top:15px;font-size: 14px;width: 400px;">
		       	<div  style="text-align: left;width: 400px;">
		       		<span style="font-size: 14px;margin-left: 0px;">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年：</span>
		            <Select placeholder="请选择学年" v-model="studyYearSelect" style="width:100px;text-align: center;" @on-change="studyYearSelectChange">
				        <Option v-for="item in studyYearList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
				    <span style="font-size: 14px;margin-left: 29px;">考试时间：</span>
		            <DatePicker v-model="examTimeSelect"  type="date" placeholder="选择日期" style="width: 103px"></DatePicker>
			    </div>
			    <div style="margin-top:20px;">
			    	<div style="font-size: 14px;width: 71px;float: left;">成绩名称：</div>
					<Input v-model="inputname" placeholder="请输入名称" style="width:314px;float: left;"></Input>
			    </div>
	       		<div style="padding-top: 10px;">
	       			<Upload
				        multiple
				        ref="upload"
				        :before-upload="handleUpload"
				        :on-success="uploadSuccess"
				        name="file"
				        type="drag"
				        :show-upload-list="false"
				        :headers="headers"
				        :data="senddata"
				        :action="actionUrl">
				        <div style="padding: 20px 0;">
				            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
				            <p>点击或拖拽文档到此处</p>
				        </div>
				    </Upload>
	       		</div>
	       		<div  style="text-align: left;margin-top:15px;margin-left:60px;font-size: 14px;">
				    <div v-for="(item, index) in file">文件: {{ item.name }} 
				        <Button @click="delectFile(item.keyID)" type="error" size="small" shape="circle" icon="close-round"></Button>
				        <Button style="margin-left:30px;"  v-if="index === 0" type="primary" @click="upload" >上传</Button>
				    </div>
				</div>
				<div  style="text-align: left;">
			    	<span style="font-size: 14px;">上传列表：</span>
		            <Select placeholder="请选择成绩" v-model="examSelect" style="width:314px;text-align: center;" >
				        <Option v-for="item in examList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
			    </div>
	       </div>
	    </Row>
	    <hr style="margin:20px 0px 0px 105px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
	     <Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 14px;font-weight: 800;margin-left: 10px;">step3:计算分析</span>
		</Row >
	    <!--<div style="text-align: left;margin-top: 20px;">
	    	<span style="font-size: 14px;margin-left: 45px;">分析名称：</span>
	    	<Input v-model="inputPerformName" placeholder="请输入评价名字" style="width: 200px" />
	    </div>-->
	    <div style="text-align: left;">
	    	<Button @click="calculation" style="margin:40px 0px 50px 118px;width: 180px;height: 50px;" size="large" type="primary">分析计算</Button>
	    </div>
	    
	</div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	import { getsessionstorage } from '@/components/js/Localstorage'
	var timeId;
	export default{
		data(){
			return{
				percent:0,
				loadingShow:false,
				checkAll: false,
//				startYearSelect:"",						//入学年份选择
				gradeSelect:"",							//选择的年级
				classselect:[],				//选择班级的select
				studyYearSelect:"",						//学年的选择
				examTimeSelect:"",							//
				inputPerformName:"",					//计算时输入的名称
				
//				startYearList:[
//					{value: '1',label: '2018'},
//					{value: '2',label: '2017'},
//                  {value: '3',label: '2016'},
//              ],
				gradeList: [],
                classlist: [],
                studyYearList: [
//					{value: '1',label: '2018'},
//					{value: '2',label: '2017'},
//                  {value: '3',label: '2016'},
                ],
                inputname:"",						//输入的名称
				file:[],
				uploadFile: [],
				actionUrl:"",
				headers: {
				    'Authorization' : ''
				},
				senddata:{
					examName:"",				//考试名称
					examDate: "",				//考试日期
					gradeId:"", 				//年级ID
					schoolYearStart:"",		//学年开始
					schoolYearEnd:"",			//学年结束
				},
				
				examSelect:"",					//上传后选择的列表
				examList: [
//					{value: '1',label: 'xxxxxxxxxxx'},
//					{value: '2',label: 'xxxxxxxxxxx'},
                ],
			}
		},
		created(){
			this.getgradelist()
		},
		computed: {
            color () {
                let color = '#2db7f5';
                if (this.percent == 100) {
                    color = '#5cb85c';
                }
                return color;
            }
        },
		methods:{
			start () {
                if (this.percent >= 85) {
                    return;
                }else if(this.percent >= 0 && this.percent <= 70){
                	let self = this;
	                self.percent += 5
	                timeId = setTimeout(function(){self.start()},500)
                }else{
                	let self = this;
	                self.percent += 1
	                timeId = setTimeout(function(){self.start()},500)
                }
                
                
            },
            successEnd () {
                this.percent = 100;
                let self = this;
                clearTimeout(timeId);
                setTimeout(function(){self.percent = 0;},1000)
            },
            failEnd () {
            	clearTimeout(timeId);
                this.percent = 0;
            },
			handleUpload (file) { // 上传文件前的事件钩子
				if(this.studyYearSelect == "" || this.examTimeSelect == ""){
					this.$Message.error({
								content: "请完善学年和考试时间信息",
								duration: 10,
								closable: true
							});	
					return;
				}
				
				let filename = file.name;
				let cutfilename = filename.slice(0,filename.lastIndexOf('.'))
				this.inputname = cutfilename
				
				this.actionUrl = api.apidomain + '/tqes/web/squaAnalysisScoreCalculation/upLoadExamExcel';
				let token = getsessionstorage("authorization");
				this.headers.Authorization = token;
				this.senddata.examName = this.inputname;
				this.senddata.examDate = this.formatDate(this.examTimeSelect,"yyyy-MM-dd");
				this.senddata.gradeId = this.gradeSelect;
				this.senddata.schoolYearStart = this.studyYearSelect;	
				this.senddata.schoolYearEnd = parseInt(this.studyYearSelect)+1;						//学年开始
//				//console.log(this.senddata)
				
				
			    // 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作
			    let keyID = Math.random().toString().substr(2);
			    file['keyID'] = keyID;
			    // 保存文件到总展示文件数据里
			    this.file.push(file);
			    // 保存文件到需要上传的文件数组里
			    this.uploadFile.push(file)
			    // 返回 falsa 停止自动上传 我们需要手动上传
			    return false;
			},
			delectFile (keyID) { // 删除文件
//				//console.log(keyID);
			    // 删除总展示文件里的当前文件
			    this.file = this.file.filter(item => {
                    return item.keyID != keyID
                })
                this.uploadFile = this.uploadFile.filter(item => {
                    return item.keyID != keyID
                })
			},
			upload () { // 上传文件
				this.senddata.examName = this.inputname;
//				this.loadingshow = true;
			    for (let i = 0; i < this.uploadFile.length; i++) {
			        let item = this.file[i]
			        this.$refs.upload.post(item);
			    }
			},
			uploadSuccess (res, file,fileList) { // 文件上传回调 上传成功后删除待上传文件
				if(res.success == true){
//						this.loadingshow = false;
						this.$Message.success({
		                    content: '上传成功',
		                    duration: 10,
		                    closable: true
		                });;
						this.file = [];
						this.uploadFile = [];
						this.getExamList()
	            }
				if(res.success == false){
//						this.loadingshow = false;
//						this.$Message.error();
						this.$Message.error({
		                    content: res.msg+"<br>"+res.data[0],
		                    duration: 10,
		                    closable: true
		                });
						this.file = [];
						this.uploadFile = [];
	            }
				
			},
			
			//获取年级选择列表
			getgradelist:function(){
//         		this.gradelistshow = true;
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchGrade/selectGrade';
            	this.$http.post(url, {"type":"High"}).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.gradeList = response.data.data
						if(self.gradeList.length != 0){
							self.gradeSelect = self.gradeList[0].value;
							self.getClassList()
							self.getStudyYearList()
						}
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00235',
							duration: 10,
							closable: true
						});
					});
           	},
			//改变年级触发的函数
			gradeChangeSelect:function(value){
				this.getClassList()
				this.getStudyYearList()
			},
			//获取班级级选择列表
           	getClassList:function(){
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/getTchClasses';
            	this.$http.post(url, {gradeId:this.gradeSelect}).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.classlist = response.data.data
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00236',
							duration: 10,
							closable: true
						});
					});
           	},
           	//获取学年选择列表
           	getStudyYearList:function(){
           		var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysisScoreCalculation/getSchoolYearFilter/'+this.gradeSelect;
            	this.$http.post(url).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.studyYearList = response.data.data
						if(self.studyYearList.length != 0){
							self.studyYearSelect = self.studyYearList[0].value;
							self.getExamList()
						}
						
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00237',
							duration: 10,
							closable: true
						});
					});
           	},
           	//学年改变触发
           	studyYearSelectChange:function(){
           		this.getExamList()
           	},
           	//获取考试列表
           	getExamList:function(){
           		var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysisScoreCalculation/getExamSelectList';
            	this.$http.post(url,{gradeId:this.gradeSelect,
            						schoolYearStart:this.studyYearSelect,
            						schoolYearEnd:parseInt(this.studyYearSelect)+1
            	}).then(function(response) {
					if(response.data.success == true){
						////console.log(response.data.data)
						self.examList = response.data.data.examSelectList
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00238',
							duration: 10,
							closable: true
						});
					});
           	},
           	//点击按钮进行分析计算
           	calculation:function(){
           		this.start();
           		var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysis/qualityAnalysis';
//          	this.loadingShow = true;
				
            	this.$http.post(url,{gradeId:this.gradeSelect,
            						examId:this.examSelect,
            						analysisName:this.inputPerformName
            	}).then(function(response) {
					if(response.data.success == true){
//							//console.log(response.data.data.msg)
//							self.loadingShow = false;
							self.successEnd();
							self.$Message.success({
			                    content: response.data.msg,
			                    duration: 10,
			                    closable: true
			                });
		            }else if(response.data.success == false){
//		            		self.loadingShow = false;
							self.failEnd();
		            		self.$Message.error({
			                    content: response.data.msg,
			                    duration: 10,
			                    closable: true
			                });
		            	}
					})
					.catch(function(error) {
//						self.loadingShow = false;
						self.failEnd();
						self.$Message.error({
							content: '系统发生错误：错误码00239',
							duration: 10,
							closable: true
						});
					});
           	},
			//iview的checkbox处理示例
			handleCheckAll:function() {
                if (this.checkAll) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
//              this.indeterminate = false;

                if (this.checkAll) {
                	this.classselect = [];
					for(let i = 0;i<this.classlist.length;i++){
						this.classselect.push(this.classlist[i].value)
					}
//                  this.classselect = ['香蕉', '苹果', '西瓜'];
                } else {
                    this.classselect = [];
                }
            },
			//checkbox改变班级后执行函数
            classchange:function(data) {
                if (data.length === this.classlist.length) {
//                  this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
//                  this.indeterminate = true;
                    this.checkAll = false;
                } else {
//                  this.indeterminate = false;
                    this.checkAll = false;
                }
            },
            //下载基数模板
       		getdownload:function(){
	       		if(this.gradeSelect == "" ){
					this.$Message.error({
								content: '请先选择年级在下载',
								duration: 10,
								closable: true
							});	
					return;
				}
	       		var senddata = {
	       			gradeId:this.gradeSelect,
	       		}
//				this.loading = true;
				var self = this;
	        	let url = api.apidomain+'/tqes/web/squaAnalysisScoreCalculation/exportExamStudentListExcel';
	        	this.loadingShow = true;
	        	this.$http.post(url,senddata).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.loadingShow = false;
						window.location.href = response.data.data;
	           }else if(response.data.success == false){
	           			self.loadingShow = false;
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
	            	}
	            	
				})
				.catch(function(error) {
					self.loadingShow = false;
					self.$Message.error({
							content: '系统发生错误：错误码00240',
							duration: 10,
							closable: true
						});
				});
			},
			//格式化日期的函数
			formatDate:function(date,format){
		        var paddNum = function(num){
		          num += "";
		          return num.replace(/^(\d)$/,"0$1");
		        }
		        //指定格式字符
		        var cfg = {
		           yyyy : date.getFullYear() //年 : 4位
		          ,yy : date.getFullYear().toString().substring(2)//年 : 2位
		          ,M  : date.getMonth() + 1  //月 : 如果1位的时候不补0
		          ,MM : paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0
		          ,d  : date.getDate()   //日 : 如果1位的时候不补0
		          ,dd : paddNum(date.getDate())//日 : 如果1位的时候补0
		          ,hh : date.getHours()  //时
		          ,mm : date.getMinutes() //分
		          ,ss : date.getSeconds() //秒
		        }
		        format || (format = "yyyy-MM-dd hh:mm:ss");
		        return format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});
		    } 
		}
	}
</script>

<style lang="css" scoped>
	.masscalculation >>> .ivu-upload .ivu-upload-drag{
		margin-top: 40px;
	    width: 315px;
    	margin-left: 71px
	}
	.masscalculation >>> .ivu-checkbox-group{
		display: inline-block;
	}
	.masscalculation >>> .ivu-checkbox-group-item{
		display: inline-block;
    	font-size: 14px;
	}
</style>